<template>
  <div class="user">
    <UserSearch
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    ></UserSearch>

    <UserContent
      ref="contentRef"
      @edit-click="handleEditBtnClick"
      @newClick="handleNewClick"
    ></UserContent>

    <UserModal ref="modalRef"></UserModal>
  </div>
</template>

<script setup lang="ts">
import UserSearch from './c-cpns/user-search.vue'
import UserContent from './c-cpns/user-content.vue'
import UserModal from './c-cpns/user-modal.vue'
import { ref } from 'vue'

// 获取子组件实例
const contentRef = ref()
const modalRef = ref()
// 查询表单
function handleQueryClick(formData: string) {
  contentRef.value.fetchUserListData(formData)
}

// 重置表单
function handleResetClick() {
  contentRef.value.fetchUserListData()
}

// 显示新增表单
function handleNewClick() {
  modalRef.value.showDialog()
}
// 编辑表单
function handleEditBtnClick(userData: any) {
  modalRef.value.showDialog(false, userData)
}
</script>

<style lang="less" scoped>
.user {
  border-radius: 8px;
  overflow: hidden;
}
</style>
